<template>
  <div class="add-class">
    <el-form
      :model="Form"
      :rules="rules"
      ref="Form"
      label-width="100px"
      class="demo-ruleForm"
    >
      <!-- 
    :model:绑定表单中所有数据对象，
    :rules:绑定对应规则对象
    :ref:设置表单的名字，当触发点击时候将表单名字传 
    项目中：prop对应的是rules中规则的名字，
    v-model双向绑定的数据是数据对象中数据的名字，

 -->

      <!-- 班级名称 -->
      <el-form-item label="班级名称" prop="className">
        <el-input v-model="Form.className"></el-input>
      </el-form-item>
      <!-- 教师名称下拉框 -->
      <el-form-item label="教室" prop="classroom">
        <el-select v-model="Form.classroom" placeholder="请选择班级">
          <el-option label="王屋山" value="王屋山"></el-option>
          <el-option label="嵩山" value="嵩山"></el-option>
          <el-option label="云台山" value="云台山"></el-option>
          <el-option label="东湖" value="东湖"></el-option>
          <el-option label="鄱阳湖" value="鄱阳湖"></el-option>
          <el-option label="洞庭湖" value="洞庭湖"></el-option>
          <el-option label="花果山" value="花果山"></el-option>
        </el-select>
      </el-form-item>

      <!-- 开班时间 -->
      <el-form-item label="开班时间" required>
        <el-col :span="11">
          <el-form-item prop="startDate">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="Form.startDate"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-form-item>

      <!--班主任姓名  -->
      <el-form-item label="班主任" prop=" ht">
        <el-radio-group v-model="Form.ht">
          <el-radio label="王趁红"></el-radio>
          <el-radio label="何爽"></el-radio>
          <el-radio label="梁佳伟"></el-radio>
          <el-radio label="毛振华"></el-radio>
          <el-radio label="赵江涛"></el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 提交按钮等 -->
      <el-form-item>
        <el-button type="primary" @click="submitForm('Form')" v-if="isshow"
          >立即创建</el-button
        >
        <el-button type="primary" v-else @click="updateData('Form')"
          >修改</el-button
        >
        <!-- 点击传过去的名字是表单ref给定的名字 -->
        <el-button @click="resetForm('Form')">重置</el-button>
        <el-button @click="CloseWindow()">关闭窗口</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { addClass, editClass } from "@/api/http.js";
import moment from "moment";
export default {
  props: ["Form", "isshow"],
  // --------------------------------数据
  data() {
    return {
      // 数据-表单数据
      // Form: {
      //   className: "",
      //   classroom: "",
      //   startDate: "",
      //   ht: "",
      // },
      // 数据-规则
      rules: {
        className: [
          { required: true, message: "请输入班级名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
      },
    };
  },
  // ----------------------------------方法
  methods: {
    /* 提交数据处理程序*/
    handleAddClass() {
      this.Form.startDate = moment(this.Form.startDate).format("YYYY-MM-DD");
      addClass(this.Form)
        .then((res) => {
          let { code } = res.data;
          if (code === 0) {
            this.$message.success("添加成功");
            this.$emit("closeWindow", "ok");
          } else {
            this.$message.success("添加失败");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 关闭窗口
    CloseWindow() {
      this.$emit("closeWindow");
    },
    /*
    执行该函数的时候，要接受，表单名字 ref
    创建的时候，验证方法同时提交到后台
    提交表单
    */
    submitForm(formName) {
      console.log(this.$refs);

      this.$refs[formName].validate((valid) => {
        //验证所有指定的规则，当规则都满足的时候执行，valid返回true
        if (valid) {
          this.handleAddClass();

        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 修改数据
    updateData() {
      this.Form.startDate = moment(this.Form.startDate).format("YYYY-MM-DD"); //修改时间格式

      editClass(this.Form).then((res) => {
        let { code } = res.data;
        if (code === 0) {
          this.$message.success("修改成功");
          this.CloseWindow();
          //  this.$message.warning("修改失败");
        } else {
          this.$message.warning("修改失败");
        }
      });
    },

    // 重置表单中的内容，清空表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="scss" >
.add-class {
  z-index: 22;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba($color: #000000, $alpha: 0.3);

  // background-color: #ccc;
}
.el-form {
  border-radius: 10px;
  z-index: 999;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background-color: #fff;
  height: 350px;
  width: 600px;
}
</style>>
